<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Ember Todos</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="css/style.css?v=2">
  <link rel="stylesheet" href="css/todos.css">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="ember.min.js"></script>
</head>
<body>
  <h1>Todos</h1>
  <script type="text/x-handlebars">
  {{view Todos.CreateTodoView id="new-todo" placeholder="What needs to be done?"}}

  <!-- Insert this after the CreateTodoView and before the collection. -->
  {{#view Todos.StatsView id="stats"}}
    {{#view Em.Button classBinding="isActive"
      target="Todos.todosController"
      action="clearCompletedTodos"}}
      Clear Completed Todos
    {{/view}}
    {{remainingString}} remaining
  {{/view}}

  {{view Em.Checkbox class="mark-all-done"
    title="Mark All as Done"
    valueBinding="Todos.todosController.allAreDone"}}

  {{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
    {{view Em.Checkbox titleBinding="content.title"
        valueBinding="content.isDone"}}
  {{/collection}}
  </script>

  <script src="app.js"></script>
</body>
</html>

